import { useEffect, useState } from 'react'
import { Row, Col, Card, Button, Carousel, Typography, Space } from 'antd'
import { useNavigate } from 'react-router-dom'
import { courseService } from '../../services'

const { Title, Paragraph } = Typography

const Home = () => {
  const navigate = useNavigate()
  const [featuredCourses, setFeaturedCourses] = useState([])

  useEffect(() => {
    loadFeaturedCourses()
  }, [])

  const loadFeaturedCourses = async () => {
    try {
      const response: any = await courseService.getCourses({ limit: 8 })
      if (response.code === 200) {
        setFeaturedCourses(response.data.courses)
      }
    } catch (error) {
      console.error('Load courses error:', error)
    }
  }

  return (
    <div>
      {/* Banner轮播 */}
      <Carousel autoplay style={{ marginBottom: '48px' }}>
        <div>
          <div style={{
            height: '400px',
            background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            color: 'white'
          }}>
            <Space direction="vertical" align="center">
              <Title level={1} style={{ color: 'white', margin: 0 }}>
                欢迎来到在线学习平台
              </Title>
              <Paragraph style={{ fontSize: '18px', color: 'white' }}>
                探索知识的海洋,成就更好的自己
              </Paragraph>
              <Button type="primary" size="large" onClick={() => navigate('/courses')}>
                开始学习
              </Button>
            </Space>
          </div>
        </div>
        <div>
          <div style={{
            height: '400px',
            background: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            color: 'white'
          }}>
            <Space direction="vertical" align="center">
              <Title level={1} style={{ color: 'white', margin: 0 }}>
                数千门优质课程
              </Title>
              <Paragraph style={{ fontSize: '18px', color: 'white' }}>
                由行业专家精心打造
              </Paragraph>
            </Space>
          </div>
        </div>
      </Carousel>

      {/* 特色课程 */}
      <div style={{ maxWidth: '1200px', margin: '0 auto', padding: '0 24px' }}>
        <Title level={2} style={{ marginBottom: '32px' }}>热门课程</Title>
        <Row gutter={[24, 24]}>
          {featuredCourses.map((course: any) => (
            <Col key={course.id} xs={24} sm={12} md={8} lg={6}>
              <Card
                hoverable
                cover={
                  <div style={{
                    height: '160px',
                    background: '#f0f2f5',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center'
                  }}>
                    {course.cover ? (
                      <img src={course.cover} alt={course.title} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                    ) : (
                      <span>课程封面</span>
                    )}
                  </div>
                }
                onClick={() => navigate(`/courses/${course.id}`)}
              >
                <Card.Meta
                  title={course.title}
                  description={
                    <div>
                      <div style={{ color: '#ff4d4f', fontSize: '18px', fontWeight: 'bold' }}>
                        ¥{course.price}
                      </div>
                      <div style={{ marginTop: '8px', color: '#999' }}>
                        {course.studentCount}人已学习
                      </div>
                    </div>
                  }
                />
              </Card>
            </Col>
          ))}
        </Row>
      </div>
    </div>
  )
}

export default Home
